<template>
  <h1>组合API-watch函数-监听reactive响应式对象</h1>
  <h2>{{ obj }}</h2>
  <button @click="btn">点我</button>
</template>

<script>
import { reactive, watch } from 'vue'
export default {
  name: 'App',
  setup() {
    // 定义响应式对象数据
    const obj = reactive({
      name: '小马',
      age: 18,
      cp: {
        name: '如花',
        age: 38,
      },
    })

    // 修改名字的函数
    const btn = () => {
      // obj.age++
      obj.cp.age++
    }

    // 监听 reactive 定义的响应式数据
    //   特点1：newVal === oldVal，根本就是同一个内容地址，就是对象本身
    //   特点2：reactive() 对象默认是深度监听，能监听到所有的子属性的变化
    watch(obj, val => {
      console.log('obj发生了变化', val)
    })

    // 返回给模板使用
    return { obj, btn }
  },
}
</script>